<template>
  <view class="main">
    <view class="tn-flex tn-flex-wrap tn-flex-row-between tn-padding-lg">
      <view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('zonghexinxi')">
        <view class=" icon">
          <image style="width: 60rpx; height: 60rpx" src="/static/icon/qingdanbeifen.svg" mode=""></image>
        </view>
        <view class="tn-text-lg">综合信息</view>
      </view>
      <view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('juanzong')">
        <view class=" icon">
          <image style="width: 60rpx; height: 60rpx" src="/static/icon/卷宗列表.svg" mode=""></image>
        </view>
        <view class="tn-text-lg">卷宗卷皮</view>
      </view>
      <view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('juannei')">
        <view class=" icon">
          <image style="width: 60rpx; height: 60rpx" src="/static/icon/清单.svg" mode=""></image>
        </view>
        <view class="tn-text-lg">卷内目录</view>
      </view>
      <view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('tanhuajilu')">
        <view class=" icon">
          <image style="width: 60rpx; height: 60rpx" src="/static/icon/谈话函询.svg" mode=""></image>
        </view>
        <view class="tn-text-lg">谈话记录</view>
      </view>
      <view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('kanyanbilu')">
        <view class=" icon">
          <image style="width: 60rpx; height: 60rpx" src="/static/icon/fuwujianguan_2.svg" mode=""></image>
        </view>
        <view class="tn-text-lg">勘验笔录</view>
      </view>
      <view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('shiguzhaopian')">
        <view class="icon">
          <image style="width: 60rpx; height: 60rpx" src="/static/icon/xianchangzhaopian_2.svg" mode=""></image>
        </view>
        <view class="tn-text-lg">事故照片</view>
      </view>
      <view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('bupinggushenqing')">
        <view class=" icon">
          <image style="width: 60rpx; height: 60rpx" src="/static/icon/申请.svg" mode=""></image>
        </view>
        <view class="tn-text-lg">不评估申请</view>
      </view>
      <view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('peichangshuoming')">
        <view class=" icon">
          <image style="width: 60rpx; height: 60rpx" src="/static/icon/赔偿查询.svg" mode=""></image>
        </view>
        <view class="tn-text-lg">赔偿说明</view>
      </view>
      <view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('peichangshouju')">
        <view class=" icon">
          <image style="width: 60rpx; height: 60rpx" src="/static/icon/fapiao_2.svg" mode=""></image>
        </view>
        <view class="tn-text-lg">赔偿收据</view>
      </view>
      <view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('anjianshipin')">
        <view class=" icon">
          <image style="width: 60rpx; height: 60rpx" src="/static/icon/视频.svg" mode=""></image>
        </view>
        <view class="tn-text-lg">案件视频</view>
      </view>
      <view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('wenshubeizhu')">
        <view class=" icon">
          <image style="width: 60rpx; height: 60rpx" src="/static/icon/备注.svg" mode=""></image>
        </view>
        <view class="tn-text-lg">文书备注</view>
      </view>
    </view>
  </view>
</template>

<script>
import {toast} from "@/utils/common";

export default {
  data() {
    return {};
  },
  methods: {
    toPage(url) {
      if(url=='aaa') return toast("敬请期待！");
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      const options = currentPage.options;
      uni.navigateTo({
        url: `/pages/roadCompensation/${url}/${url}?id=${options.id}&isClosed=${this.$route.query.isClosed}`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  background-color: #f7f8fd;
  min-height: calc(100vh - 44px);
}

.nav_item {
  width: calc(50% - 20rpx);
  margin-bottom: 40rpx;
  border-radius: 6px;
  padding: 16px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150rpx;
}

.icon {
  width: 100rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 28rpx;
  margin-right: 10rpx;
}

.nav_bg {
  background-image: url('/static/index/item-bg.png');
  background-size: 100% 100%;
}
</style>
